<script lang="ts" setup>
import Header from '@/components/Header/index.vue'
import SearchPart from '@/components/SearchPart/index.vue'
import Footer from '@/components/Footer/index.vue'
import { onMounted, onUnmounted, ref } from 'vue'

const scrollWrapper = ref<HTMLElement>()
const scrollView = ref<HTMLElement>()

const seckillList = ref([1, 2, 3, 4, 5, 6])
const seckillTimeline = ref([1, 2, 3, 4, 5, 6, 2, 3, 4, 5, 2, 3, 4, 5])
const currentSeckill = ref(0)

let scrollBarPage: any = null
let scrollBarCurrentIndex = 1
let scrollContainer: any = null
let baseLength: any = null
let totalLength: any = null

const changeSeckill = (index: number) => {
  currentSeckill.value = index
}

const prev = () => {
  if (scrollBarCurrentIndex <= 1) {
    return
  }
  let length = scrollWrapper.value.offsetWidth * (scrollBarCurrentIndex - 2)
  if (length < 0) {
    length = 0
  }
  scrollView.value.style.left = `-${length}px`
  // console.log(length)
  scrollBarCurrentIndex--
}

const next = () => {
  if (scrollBarCurrentIndex >= scrollBarPage) {
    return
  }
  let length = scrollWrapper.value.offsetWidth * scrollBarCurrentIndex
  if (length + baseLength > totalLength) {
    length = totalLength - baseLength
  }
  scrollView.value.style.left = `-${length}px`
  scrollBarCurrentIndex++
}

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.target === scrollWrapper.value) {
      if (scrollView.value) {
        if (scrollView.value.children.length > 0) {
          console.log(scrollView.value.children[0].offsetWidth)
          baseLength = scrollView.value.children[0].offsetWidth
        }
        scrollBarPage = Math.ceil(totalLength / entry.target.offsetWidth)
      }
    }
  }
})
onMounted(() => {
  if (scrollView.value) {
    scrollView.value.style.left = '0'
    scrollView.value.style.transition = 'left .3s ease'
    totalLength = scrollView.value.offsetWidth
    resizeObserver.observe(scrollWrapper.value)
  }
})

onUnmounted(() => {
  resizeObserver.disconnect()
})
</script>
<template>
  <Header />
  <div class="search-wrapper">
    <SearchPart />
  </div>
  <div class="seckill-container">
    <div class="seckill-wrapper">
      <div class="timeline-list">
        <div class="scroll-bar">
          <div class="scroll-wrapper" ref="scrollWrapper">
            <div class="scroll-view" ref="scrollView">
              <div
                :class="[
                  'timeline-item',
                  currentSeckill === index ? 'focus' : '',
                ]"
                v-for="(item, index) in seckillTimeline"
                :key="index"
                @click="changeSeckill(index)"
              >
                <div class="timeline-link">
                  <div class="timeline-time"><i>10:00 场</i></div>
                  <div class="timeline-status">已开始</div>
                </div>
              </div>
            </div>
          </div>
          <div class="scroll-left-btn" @click="prev">
            <i class="iconfont icon-jiantouzuo"></i>
          </div>
          <div class="scroll-right-btn" @click="next">
            <i class="iconfont icon-jiantouyou"></i>
          </div>
        </div>
      </div>
      <div class="product-list">
        <div
          :class="['product-item-wrap', 'default']"
          v-for="(item, index) in seckillList"
          :key="index"
        >
          <div class="product-item">
            <div class="product-img">
              <img src="../../assets/vue.svg" alt="" />
            </div>
            <div class="product-info">
              <div class="info-title-wrapper">
                <div class="info-title">
                  大疆 DJI Avata/FPV 航拍机 无人机 高清航拍 二手无人机 大疆
                  Avata 探索套装
                </div>
              </div>
              <div class="tag-list">
                <div class="tag-text">限时秒杀 抢先提醒</div>
              </div>
              <div class="price-wrapper">
                <span class="price-unit">￥</span>
                <span class="price-value">3479.00</span>
                <span class="month-sale">69+人购买</span>
              </div>
              <div class="operation-container">
                <div class="progress">
                  <span class="txt">已售</span>
                  <div class="progress-bar">
                    <div class="progress-inner"></div>
                  </div>
                  <span class="txt">20%</span>
                </div>
                <div class="operation">立即抢购</div>
              </div>
              <!-- <div class="store-wrapper">
                <div class="store-name">大疆官方旗舰店</div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Footer />
</template>
<style lang="less" scoped>
.search-wrapper {
  padding: 20px;
  background-color: #fff;
}
.seckill-container {
  display: flex;
  padding: 20px 0;
  justify-content: center;
  background-color: #d9d9d9;
}
.scroll-bar {
  width: 100%;
  height: 92px;
  padding: 10px 0;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #f3f6f8;
  position: relative;
  padding: 5px 10px;
  box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.1),
    inset 0px 0px 3px rgba(0, 0, 0, 0.1), inset 0px 0px 3px rgba(0, 0, 0, 0.1),
    inset 0px 0px 3px rgba(0, 0, 0, 0.1), inset 0px 0px 3px rgba(0, 0, 0, 0.1);
  .scroll-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    box-sizing: border-box;
  }
  .scroll-view {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
  }
  .scroll-left-btn,
  .scroll-right-btn {
    position: absolute;
    background-color: #fff;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 50%;
    text-align: center;
    border: 1px solid #d9d9d9;
    cursor: pointer;
    color: #999;
    box-shadow: @shadow-color;
  }
  .scroll-left-btn {
    left: -1%;
    top: 50%;
    transform: translateY(-50%);
  }
  .scroll-right-btn {
    right: -1%;
    top: 50%;
    transform: translateY(-50%);
  }
}
.seckill-wrapper {
  width: 1296px;
  border-radius: 10px;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.timeline-list {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 20px 20px 0 20px;
  // height: 60px;
  // margin-left: 60px;
  // box-sizing: border-box;
}
.timeline-item {
  text-align: center;
  font-size: 18px;
  width: 115px;
  height: 62px;
  margin: 10px 14px 10px 0;
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: @shadow-color;
  .timeline-time {
    margin-top: 5px;
    height: 30px;
    line-height: 30px;
    font-weight: 700;
    color: #ff5000;
    transition: all 0.3s;
  }
  .timeline-status {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #333;
  }
  .timeline-link {
    height: 62px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    color: #333;
    transition: all 0.3s;
  }
  &.focus {
    .timeline-link {
      height: 62px;
      background-color: #ff5000;
      border-radius: 10px;
      overflow: hidden;
      color: #fff;
    }
    .timeline-status,
    .timeline-time {
      color: #fff;
    }
    &::after {
      content: '';
      width: 12px;
      height: 12px;
      position: absolute;
      left: 50%;
      bottom: -6px;
      transform: translateX(-50%) rotate(45deg);
      background-color: #ff5000;
    }
  }

  &::after {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%) rotate(45deg);
    background-color: #fff;
    transition: all 0.3s;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  }
}

.product-list {
  padding: 20px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
}
.product-item-wrap.default {
  box-sizing: border-box;
  padding: 10px;
  width: 20%;
  .product-item {
    padding: 10px;
    border-radius: 10px;
    overflow: hidden;
    // box-shadow: @shadow-color;
    transition: all 0.3s;
    border: 1px solid #e9e9e9;
    &:hover .product-img img {
      transform: scale(1.05);
    }
  }
  .product-img {
    width: 100%;
    height: 230px;
    border-radius: 10px;
    background-color: yellow;
    img {
      transition: all 0.3s;
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
  .info-title {
    font-size: 14px;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
    margin: 10px 0;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .tag-list {
    display: flex;
    box-sizing: border-box;
    padding: 0 2px;
  }
  .tag-text {
    color: #ff5000;
    font-size: 12px;
    &:not(:last-child) {
      margin-right: 5px;
    }
  }
  .price-wrapper {
    margin: 10px 0;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    height: 24px;
  }
  .price-unit,
  .price-value {
    color: #ff5000;
  }
  .price-unit {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 1px;
    margin-right: 2px;
  }
  .price-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
  }
  .month-sale {
    color: #50607a;
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 1px;
    margin-left: 8px;
  }
  .store-wrapper {
    display: flex;
    cursor: pointer;
    .store-name {
      font-size: 12px;
      line-height: 18px;
    }
  }
  .operation-container {
    display: flex;
    justify-content: space-between;
    .progress {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 12px;
      .progress-bar {
        width: 60px;
        height: 10px;
        border-radius: 5px;
        margin: 0 5px;
        background-color: #e9e9e9;
        .progress-inner {
          width: 50px;
          height: 10px;
          border-radius: 5px;
          background-color: #ff5000;
        }
      }
      .progress-text {
        font-size: 12px;
        line-height: 12px;
        color: #ff5000;
      }
    }
    .operation {
      width: 80px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #fff;
      border-radius: 5px;
      background-color: #ff5000;
      cursor: pointer;
    }
  }
}
@media screen and (max-width: 1276px) {
  .product-item-wrap.default {
    width: 25%;
  }
}

@media screen and (max-width: 1032px) {
  .product-item-wrap.default {
    width: 33.3%;
  }
}

@media screen and (max-width: 788px) {
  .product-item-wrap.default {
    width: 50%;
  }
}

@media screen and (max-width: 544px) {
  .product-item-wrap.default {
    width: 100%;
    padding: 0;
  }
}
</style>
